<template>
  <div>
     <div class="tab">
    <ul class="area">
      <li
        v-for="item in areaTab"
        :key="item.value"
        :class="area == item.value ? 'active' : ''"
        @click="changeArea(item.value)"
      >
        {{ item.type }}
      </li>
    </ul>
    <ul class="type">
      <li
        v-for="item in typeTab"
        :key="item.value"
        :class="type == item.value ? 'active' : ''"
        @click="changeType(item.value)"
      >
        {{ item.type }}
      </li>
    </ul>
  </div>
  <div class="list">
      <div class="listItem" v-for="item in singerList" :key="item.id" @click="toDetail(item.id)">
        <img :src="item.img1v1Url" />
        <span>{{ item.name }}</span>
      </div>
  </div>
</div>

</template>
<script>
import { getSingerAPI ,getSingerDetailAPI } from "@/api";
export default {
  name: "Singer",
  data() {
    return {
      area: -1,  //歌手地区
      type: -1,  //歌手类型
      areaTab: [
        { type: "全部", value: -1 },
        { type: "华语", value: 7 },
        { type: "欧美", value: 96 },
        { type: "日本", value: 8 },
        { type: "韩国", value: 16 },
        { type: "其他", value: 0 },
      ],  
      typeTab: [
        { type: "全部", value: -1 },
        { type: "男歌手", value: 1 },
        { type: "女歌手", value: 2 },
        { type: "乐队", value: 3 },
      ],
      singerList:[],   //结果数组
      offset:0,  //偏移数量
      canLoad:true,  //控制触底
    };
  },
  methods:{
    // 获取歌手榜
    async getSingerList(){
      const res = await getSingerAPI({
        type:this.type,
        area:this.area,
        offset:this.offset
      })
      this.singerList=[...this.singerList,...res.data.artists];
      this.canLoad = true;
    },
    changeType(value){
      this.type = value;
      this.offset = 0;
      this.singerList = [];
      this.getSingerList();
    },
    changeArea(value){
      this.area = value;
      this.offset = 0;
      this.singerList = [];
      this.getSingerList();
    },
    toDetail(id){
      this.$router.push({
        name:'detail',
        query:{
          id
        }
      })
    },
  },
  computed:{
    main(){
      return this.$store.state.scroll.main;
    }
  },
  mounted(){
    this.getSingerList();
    this.main.addEventListener('scroll',(e)=>{ 
      if(this.$route.name=='singer') {
        let isLoadMore = e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight < 10;
        if(isLoadMore&&this.canLoad){
          this.offset+=30;
          this.canLoad = false;
          this.getSingerList();
        }
      }
    });
  },
};
</script>
<style lang="less" scoped>
.tab {
  width: 100%;
  margin-left: 24px;
  ul {
    width: 80%;
    display: flex;
    margin-bottom: 10px;
    li {
      float: left;
      font-size: 14px;
      font-weight: lighter;
      padding: 4px 6px 4px 6px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      background-color: rgb(254, 248, 250);
      color: #ff7a9e;
      border-radius: 16px;
    }
  }
}
.list{
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .listItem{
  height: 180px;
  width: 130px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  span {
    font-weight: lighter;
    font-size: 15px;
    word-break: break-all;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  img {
    width: 130px;
    height: 130px;
    border-radius: 4px;
  }
}
}
</style>